import Layout from "components/Layout";
import styled from "styled-components";
import Avatar from "@mui/material/Avatar";
import { Card } from "@material-ui/core";
import { deepOrange } from "@material-ui/core/colors";

import Operator from "./operator";

import List from "@mui/material/List";
import ListItem from "@mui/material/ListItem";
import ListItemButton from "@mui/material/ListItemButton";
import ListItemIcon from "@mui/material/ListItemIcon";
import ListItemText from "@mui/material/ListItemText";
import Divider from "@mui/material/Divider";
import InboxIcon from "@mui/icons-material/Inbox";
import DraftsIcon from "@mui/icons-material/Drafts";
import Paper from "@mui/material/Paper";
import FilterDramaIcon from '@mui/icons-material/FilterDrama';
import LteMobiledataIcon from '@mui/icons-material/LteMobiledata';
import InfoIcon from '@mui/icons-material/Info';
const UserHomeWrapper = styled.div`
  background-color: #f1f2f6;
  padding: 10px;
`;
const UserTileWrapper = styled.div`
  padding: 10px;

  margin-top: 30px;
  margin-bottom: 30px;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  .user-info {
    padding: 0 10px;
    display: flex;
    flex-direction: column;
    .user-name {
      font-size: 18px;
      font-weight: 600;
      color: #333;
    }
    .sign {
      margin-top: 10px;
      font-size: 12px;
      color: #666;
    }
  }
`;

const UserTile = () => {};
const UserHome = () => {
  return (
    <Layout>
      <UserHomeWrapper>
        <UserTileWrapper>
          <Avatar
            alt="Remy Sharp"
            src="/static/images/avatar/1.jpg"
            sx={{ bgcolor: deepOrange[500] }}
          />
          <div className="user-info">
            <span className="user-name">红药丸</span>
            <span className="sign">积土成山,聚沙成塔,坚持记账的第2天</span>
          </div>
        </UserTileWrapper>
        <Operator />
        <Paper elevation={0}>
          <List>
            <ListItem disablePadding>
              <ListItemButton>
                <ListItemIcon>
                  <FilterDramaIcon />
                </ListItemIcon>
                <ListItemText primary="云同步" />
              </ListItemButton>
            </ListItem>
            <ListItem disablePadding>
              <ListItemButton>
                <ListItemIcon>
                  <LteMobiledataIcon />
                </ListItemIcon>
                <ListItemText primary="数据备份"/>
              </ListItemButton>
                      </ListItem>
                      <ListItem disablePadding>
              <ListItemButton>
                <ListItemIcon>
                  <InfoIcon />
                </ListItemIcon>
                <ListItemText primary="关于我们"/>
              </ListItemButton>
            </ListItem>
          </List>
        </Paper>
      </UserHomeWrapper>
    </Layout>
  );
};

export default UserHome;
